<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Universal Link 跳转页</title>
    <link rel="icon" href="data:," />
    <style>
      body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol'; background: #f7f7f8; color: #111; margin:0; }
      .container { max-width: 860px; margin: 40px auto; padding: 0 16px; }
      h1 { font-size: 28px; margin: 0 0 12px; }
      .desc { color: #666; margin-bottom: 20px; }
      .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
      .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      label { display: flex; flex-direction: column; font-size: 13px; color: #333; }
      input { margin-top: 6px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
      .btns { display: flex; gap: 12px; flex-wrap: wrap; }
      .btn { padding: 10px 14px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; font-size: 14px; }
      .btn.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
      .status { color: #2563eb; }
      .note { color: #9CA3AF; font-size: 12px; }
      code { background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script type="module">
      const { createApp, ref, computed, onMounted } = Vue;

      function getQuery() {
        const params = new URLSearchParams(location.search);
        return Object.fromEntries(params.entries());
      }
      function isIOS() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }
      function isAndroid() { return /Android/i.test(navigator.userAgent); }
      function isWeChat() { return /MicroMessenger/i.test(navigator.userAgent); }
      function nowMs() { return Date.now(); }

      createApp({
        setup() {
          const q = getQuery();
          const scheme = ref(q.scheme || 'myapp');
          const path = ref(q.path || '');
          const pkg = ref(q.pkg || 'com.example.app');
          const iosStore = ref(q.ios_store || '');
          const androidStore = ref(q.android_store || '');
          const auto = ref(q.auto === '1');
          const status = ref('');

          const intentUrl = computed(() => {
            const p = path.value.startsWith('/') ? path.value.slice(1) : path.value;
            const bf = androidStore.value || location.origin;
            return `intent://${encodeURIComponent(p)}#Intent;scheme=${scheme.value};package=${pkg.value};S.browser_fallback_url=${encodeURIComponent(bf)};end`;
          });
          const schemeUrl = computed(() => `${scheme.value}://${path.value}`);
          const universalLink = computed(() => {
            return path.value ? `${location.origin}${path.value.startsWith('/') ? path.value : '/' + path.value}` : location.origin;
          });

          function tryOpenWithScheme() {
            status.value = '正在尝试通过自定义 Scheme 打开…';
            const start = nowMs();
            window.location.href = schemeUrl.value;
            setTimeout(() => {
              const elapsed = nowMs() - start;
              if (isIOS()) {
                if (iosStore.value) window.location.href = iosStore.value;
              } else if (isAndroid()) {
                if (androidStore.value) window.location.href = androidStore.value;
              }
            }, 1500);
          }

          function tryOpenWithIntent() {
            status.value = '正在尝试通过 Android Intent 打开…';
            window.location.href = intentUrl.value;
          }

          onMounted(() => {
            if (auto.value) {
              if (isAndroid()) {
                tryOpenWithIntent();
              } else {
                tryOpenWithScheme();
              }
            }
          });

          return { scheme, path, pkg, iosStore, androidStore, status, isIOS, isAndroid, isWeChat, intentUrl, schemeUrl, universalLink, tryOpenWithScheme, tryOpenWithIntent };
        },
        template: `
          <main class="container">
            <h1>Universal Link 跳转页</h1>
            <p class="desc">用于 iOS/Android App 的通用链接与回退。</p>

            <section class="card">
              <h2>当前配置</h2>
              <div class="grid">
                <label>Scheme: <input v-model="scheme" placeholder="myapp" /></label>
                <label>Path: <input v-model="path" placeholder="/home?foo=bar" /></label>
                <label>Android 包名: <input v-model="pkg" placeholder="com.example.app" /></label>
                <label>iOS Store: <input v-model="iosStore" placeholder="https://apps.apple.com/app/id123456" /></label>
                <label>Android Store: <input v-model="androidStore" placeholder="https://play.google.com/store/apps/details?id=com.example.app" /></label>
              </div>
            </section>

            <section class="card">
              <h2>跳转方式</h2>
              <p class="status" v-if="status">{{ status }}</p>
              <div class="btns">
                <a class="btn primary" :href="universalLink" target="_self">通过 Universal Link 打开</a>
                <button class="btn" @click="tryOpenWithScheme">尝试自定义 Scheme</button>
                <button class="btn" v-if="isAndroid()" @click="tryOpenWithIntent">尝试 Android Intent</button>
              </div>
              <p class="note" v-if="isWeChat()">检测到微信内置浏览器，可能无法直接跳转，请右上角“在浏览器打开”。</p>
            </section>

            <section class="card">
              <h2>使用说明</h2>
              <ul>
                <li>iOS 需在本域名配置 <code>.well-known/apple-app-site-association</code> 并在 App 添加 Associated Domains。</li>
                <li>Android 需配置 <code>.well-known/assetlinks.json</code> 或使用 Intent 方案。</li>
                <li>可通过查询参数控制：<code>?scheme=...&path=...&pkg=...&ios_store=...&android_store=...&auto=1</code></li>
              </ul>
            </section>
          </main>
        `,
      }).mount('#app');
    </script>
  </body>
  </html>